<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">二维码生成工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          placeholder="请输入要生成二维码的文本..."
            :rows="4"
            :auto-size="{ minRows: 4, maxRows: 8 }"
            class="font-mono"
          />
        </a-form-item>

      <!-- 选项区域 -->
        <a-row :gutter="16">
        <!-- 尺寸选项 -->
          <a-col :span="12">
            <a-form-item label="二维码尺寸">
              <a-input-number
                v-model:value="size"
                :min="100"
                :max="1000"
                :step="50"
                :formatter="value => `${value}像素`"
                :parser="value => value!.replace('像素', '')"
                style="width: 150px"
              />
            </a-form-item>
          </a-col>

        <!-- 容错级别 -->
          <a-col :span="12">
            <a-form-item label="容错级别">
              <a-select
                v-model:value="errorCorrectionLevel"
                style="width: 150px"
          >
                <a-select-option value="L">低 (7%)</a-select-option>
                <a-select-option value="M">中 (15%)</a-select-option>
                <a-select-option value="Q">较高 (25%)</a-select-option>
                <a-select-option value="H">高 (30%)</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="generateQRCode">
          生成二维码
            </a-button>
            <a-button
          v-if="qrDataUrl"
              type="primary"
          @click="downloadQRCode"
              :icon="h(DownloadOutlined)"
        >
          下载二维码
            </a-button>
          </a-space>
        </a-form-item>

      <!-- 错误提示 -->
        <a-alert
        v-if="errorMessage" 
          type="error"
          :message="errorMessage"
          class="mb-6"
          show-icon
        />

      <!-- 预览区域 -->
        <template v-if="qrDataUrl">
          <a-divider>预览</a-divider>
          <div class="flex justify-center">
            <a-card class="bg-white">
          <img 
            :src="qrDataUrl" 
            :alt="inputText"
            class="max-w-full h-auto"
          />
            </a-card>
        </div>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import QRCode from 'qrcode';

const inputText = ref('');
const size = ref(300);
const errorCorrectionLevel = ref<'L' | 'M' | 'Q' | 'H'>('M');
const qrDataUrl = ref('');
const errorMessage = ref('');

const generateQRCode = async () => {
  if (!inputText.value) {
    errorMessage.value = '请输入要生成二维码的文本';
    qrDataUrl.value = '';
    message.warning('请输入要生成二维码的文本');
    return;
  }

  try {
    qrDataUrl.value = await QRCode.toDataURL(inputText.value, {
      width: size.value,
      margin: 1,
      errorCorrectionLevel: errorCorrectionLevel.value
    });
    errorMessage.value = '';
    message.success('二维码生成成功！');
  } catch (err) {
    errorMessage.value = '生成二维码失败，请检查输入';
    qrDataUrl.value = '';
    message.error('生成二维码失败，请检查输入');
  }
};

const downloadQRCode = () => {
  if (!qrDataUrl.value) return;

  const link = document.createElement('a');
  link.download = 'qrcode.png';
  link.href = qrDataUrl.value;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  message.success('二维码下载成功！');
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

.dark .ant-card {
  background-color: #1f2937;
}
</style> 